<template>
  <div class="addressManagement" v-if="collectData">
    <van-nav-bar
        title="地址列表"
        left-text="返回"
        left-arrow
        :placeholder="true"
        :safe-area-inset-top="true"
        @click-left="$router.back()"
    />
    <div class="blue" v-if="collectData"></div>
    <!--  地址列表  -->
    <div class="container" v-if="collectData">
      <div v-for="(item,index) in collectData" :key="index">
        <van-cell center label="描述信息" clickable>
          <template #right-icon>
            <van-icon name="edit" size="20" color="#999" @click="gotoEditAddress(item)"/>
          </template>
          <template #title>
            <span>{{ item.name }}</span>
            <span>&nbsp;&nbsp;</span>
            <span>{{ item.tel }}</span>
            <span>&nbsp;&nbsp;</span>
            <van-tag round type="primary" color="#0c34ba">{{ item.isDefault === 0 ? '' : '默认' }}</van-tag>
          </template>
          <template #label>
            <span>{{ item.province }}</span>
            <span>{{ item.city }}</span>
            <span>{{ item.county }}</span>
            <span>{{ item.addressDetail }}</span>
          </template>
        </van-cell>
      </div>
    </div>
    <!--  底部新增地址按钮  -->
    <div class="btn" @click="$router.push('/addAddress')">
      <button>新增地址</button>
    </div>
  </div>
</template>

<script>

import {findAddress} from "@/api/my";

export default {
  name: "addressManagement",
  data() {
    return {
      collectData: [],
      tokenString: ''
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let self = this;
      let tokenString = this.$cookies.get("tokenString");
      let data = {
        tokenString: tokenString
      }
      findAddress(data).then(res => {
        if (res.data.code === 700) {
          self.$toast.fail('登录信息异常，请重新登录！')
          self.$router.push('/login')
        } else if (res.data.code === 20000) {
          self.collectData = res.data.result
        } else {
          self.$toast.fail(res.data.code)
        }
      })
    },
    gotoEditAddress(item) {
      this.$router.push({name: 'editAddress', query: {aid: item.aid}})
    }
  }
}
</script>

<style scoped lang="less">
.addressManagement {
  .blue {
    background: #0c34ba;
    width: 100%;
    height: 100px;
  }

  .container {
    margin: -20px 10px 0 10px;
    border-radius: 3%;
    padding: 5px;

  }

  .btn {
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 20px;

    button {
      width: 95%;
      height: 40px;
      line-height: 40px;
      color: white;
      background: #0c34ba;
      border-radius: 15px;
      border: none;
    }
  }

}
</style>
